<!-- views/reconciliation/components/SmartMatchProgress.vue -->
<template>
  <el-dialog
    v-model="visible"
    title="智能匹配进度"
    width="500px"
    :close-on-click-modal="false"
    :show-close="false"
  >
    <div class="progress-content">
      <div class="algorithm-info">
        <el-tag type="primary">{{ algorithmName }}</el-tag>
        <span class="algorithm-desc">正在执行智能匹配算法</span>
      </div>
      
      <div class="progress-indicator">
        <el-progress 
          type="circle" 
          :percentage="progress" 
          :status="progressStatus"
          :width="120"
        />
      </div>
      
      <div class="progress-details">
        <div class="detail-item">
          <span class="label">已处理:</span>
          <span class="value">{{ processedCount }} / {{ totalCount }}</span>
        </div>
        <div class="detail-item">
          <span class="label">找到匹配:</span>
          <span class="value">{{ matchCount }}</span>
        </div>
        <div class="detail-item">
          <span class="label">预计剩余:</span>
          <span class="value">{{ remainingTime }}秒</span>
        </div>
      </div>
      
      <div class="algorithm-stages">
        <div 
          v-for="(stage, index) in algorithmStages" 
          :key="index"
          class="stage-item"
          :class="{ 'stage-active': currentStage === index, 'stage-completed': index < currentStage }"
        >
          <div class="stage-icon">
            <el-icon v-if="index < currentStage">
              <SuccessFilled />
            </el-icon>
            <el-icon v-else-if="index === currentStage">
              <Loading />
            </el-icon>
            <span v-else>{{ index + 1 }}</span>
          </div>
          <div class="stage-name">{{ stage.name }}</div>
        </div>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button 
          @click="handleCancel" 
          :disabled="progress >= 100"
        >
          取消匹配
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { SuccessFilled, Loading } from '@element-plus/icons-vue'

interface Props {
  modelValue: boolean
  progress: number
  currentAlgorithm: string
}

const props = defineProps<Props>()
const emit = defineEmits(['update:modelValue', 'cancel'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const algorithmName = computed(() => {
  const algorithmMap: Record<string, string> = {
    comprehensive: '综合匹配算法',
    exact: '精确匹配算法',
    amount_first: '金额优先算法',
    time_window: '时间窗口算法'
  }
  return algorithmMap[props.currentAlgorithm] || '未知算法'
})

const progressStatus = computed(() => {
  if (props.progress >= 100) return 'success'
  return ''
})

const processedCount = computed(() => Math.floor(props.progress * 0.8))
const totalCount = ref(1000)
const matchCount = computed(() => Math.floor(props.progress * 7.5))
const remainingTime = computed(() => Math.max(0, Math.floor((100 - props.progress) * 0.5)))

const currentStage = computed(() => {
  if (props.progress >= 90) return 3
  if (props.progress >= 60) return 2
  if (props.progress >= 30) return 1
  return 0
})

const algorithmStages = ref([
  { name: '数据预处理' },
  { name: '特征提取' },
  { name: '相似度计算' },
  { name: '结果生成' }
])

const handleCancel = () => {
  emit('cancel')
}
</script>

<style scoped lang="scss">
.progress-content {
  text-align: center;
  
  .algorithm-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    
    .algorithm-desc {
      color: #606266;
    }
  }
  
  .progress-indicator {
    margin: 20px 0;
  }
  
  .progress-details {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
    padding: 16px;
    background: #f5f7fa;
    border-radius: 8px;
    
    .detail-item {
      .label {
        color: #606266;
        font-size: 12px;
      }
      
      .value {
        font-weight: 500;
        color: #303133;
      }
    }
  }
  
  .algorithm-stages {
    display: flex;
    justify-content: space-between;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 12px;
      left: 40px;
      right: 40px;
      height: 2px;
      background: #e4e7ed;
      z-index: 1;
    }
    
    .stage-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 2;
      
      .stage-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #e4e7ed;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        color: #909399;
        font-size: 12px;
      }
      
      .stage-name {
        font-size: 12px;
        color: #909399;
      }
      
      &.stage-active {
        .stage-icon {
          background: #409eff;
          color: white;
        }
        
        .stage-name {
          color: #409eff;
          font-weight: 500;
        }
      }
      
      &.stage-completed {
        .stage-icon {
          background: #67c23a;
          color: white;
        }
        
        .stage-name {
          color: #67c23a;
        }
      }
    }
  }
}

.dialog-footer {
  text-align: center;
}
</style>